import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input, Modal, InputNumber, Upload, Button, Icon, Select, Radio, Switch, TreeSelect } from 'antd';
import { formatMessage } from 'umi-plugin-react/locale';
import { FormComponentProps } from '@ant-design/compatible/es/form';
import React, { useState } from 'react';
import styles from '../style.less';
// 导入自定义组件1
import PreviewForm from '@/components/PreviewForm';
import * as BdHelper from '@/utils/BdHelper';
import * as DataHelper from '@/helpers/DataHelper';
import * as TsxHelper from '@/helpers/TsxHelper';

// 常量
const { TextArea } = Input;
const FormItem = Form.Item;

// 定义: 数据表单属性
interface DataFormProps extends FormComponentProps {
  dataModalVisible: boolean;
  isUpdate: boolean
  dataFormValues: any
  common: any
  onSubmit: (fieldsValue: any) => any;
  onCancel: () => void;
}

// 数据表单
const DataForm: React.FC<DataFormProps> = props => {
  // 组件属性
  const { dataModalVisible, form, onSubmit: handleSubmit, onCancel,
    common, isUpdate, dataFormValues ,moveId} = props;

  // 图片状态
  const [picture, setPicture] = useState<any[]>([]);
  const [uploadChanged, setUploadChanged] = useState<boolean>(false);
  const [previewModelVisible, handlePreviewModalVisible] = useState<boolean>(false);
  const [previewImg, setPreviewImg] = useState('');
  const [picture2, setPicture2] = useState<any[]>([]);
  const [uploadChanged2, setUploadChanged2] = useState<boolean>(false);

  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      fieldsValue.group_id = moveId;
      console.log("submit fields ", fieldsValue)
      // 如果更新成功之后，重置表单
      handleSubmit(fieldsValue).then((success: any) => {
        console.log('handleSubmit then success is ', success)
        if (success) {
          form.resetFields()
          setPicture([])
        }
      })

    });
  };

  // 设置上传文件值
  const setUploadFile = (fileList: any) => {
    setUploadChanged(true)
    let fileArr = DataHelper.getLastUploadFile(fileList)
    console.log("fileArr is ", fileArr)
    if (fileArr.length > 0) {
      setPicture(fileArr)
      setPreviewImg(fileArr[0].file_url)
    } else if (fileArr.length === 0) {
      console.log('set picture []')
      setPicture([])
    }
  }
  const setUploadFile2 = (fileList: any) => {
    setUploadChanged2(true)
    const fileArr = DataHelper.getLastUploadFile(fileList)
    console.log("fileArr is ", fileArr)
    if (fileArr.length > 0) {
      setPicture2(fileArr)
      setPreviewImg(fileArr[0].file_url)
    } else if (fileArr.length === 0) {
      console.log('set picture []')
      setPicture2([])
    }
  }

  // 初始化变量
  const token = BdHelper.getBdToken()
  const [dataLangModalVisible, handleDataModalVisible] = useState<boolean>(false);
  const [fieldTitle, setFieldTitle] = useState<any>('');
  const [siteDescJson, setSiteDescJson] = useState<any>(dataFormValues.descriptionArr || []);
  const [siteNameJson, setSiteNameJson] = useState<any>(dataFormValues.nameArr || []);
  // 编辑时初始化 picture
  const defaultPicture = DataHelper.buildFileByUrl(dataFormValues.file_url)
  const defaultPicture2 = DataHelper.buildFileByUrl(dataFormValues.rule)
  const [nameListLang, setnameList] = useState<any>(common?.multilingualoption);
  // 是否展示图片上传按钮
  const showUploadButton = DataHelper.showUploadBtn(isUpdate, picture, defaultPicture, uploadChanged)
  const showUploadButton2 = DataHelper.showUploadBtn(isUpdate, picture2, defaultPicture2, uploadChanged2)
  // 表单提交
  const handleSubmitDataForm = (value: any, title: any) => {
    console.log(value, 241)
    setnameList(value)
    if (title == "name") {
      setSiteNameJson(value);
      console.log(2, 45)
    } else if (title == "desc") {
      setSiteDescJson(value);
      console.log(4, 56)
    }
    handleDataModalVisible(false)
  }
  // 弹出框
  // @ts-ignore
  return <Modal
    className={styles.input}
    destroyOnClose
    title={'移动小组'}
    width={DataHelper.DEFAULT_MODAL_WIDTH}
    visible={dataModalVisible}
    onOk={okHandle}
    onCancel={() => onCancel()}
  >
    <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'当前分类'}>
      {form.getFieldDecorator('group', {
        //initialValue:  dataFormValues.group_id,
        // rules: [],
      })(<span>{dataFormValues.name}</span>)}
    </FormItem>
    <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'目标分类'}>
    {form.getFieldDecorator('moveGroupId', {
    //initialValue: isUpdate ? dataFormValues?.type && (dataFormValues?.type).toString() : undefined,
    //  rules: [{ required: true, message: '请选择！',}],
    })(<Select placeholder={formatMessage({ id: 'app.base.please_select' })} size={'default'} style={{ width: '100%' }}>
    {common?.oneGroupOption && TsxHelper.buildSelectOption(common?.oneGroupOption)}
    </Select>)}
    </FormItem>
    {
      previewModelVisible && (
        <PreviewForm
          previewModelVisible={previewModelVisible}
          onVisibleModel={handlePreviewModalVisible}
          previewImg={previewImg}
        />
      )
    }
  </Modal>;
};

export default Form.create<DataFormProps>()(DataForm);
